<template>
  <td
    :colspan="item.col"
    :rowspan="item.row"
    :class="{ cellHide: item.hide, activeItem: isActiveItem }"
    :style="{ tdStyle, 'background-color': item.style.background, width: item.style.width + '%' }"
    style=""
    @contextmenu.prevent="rightClick($event, trIndex, tdIndex)"
  >
    <div class="component-td">
      <span>{{ item.id }}</span>
      <slot :td="item" />
    </div>
  </td>
</template>

<script>
  export default {
    name: 'FancyTableItem',
    components: {},
    inject: ['getContext'],
    props: {
      item: {
        type: Object,
        default: {},
      },
      tdIndex: {
        type: Number,
        default: 0,
      },
      trIndex: {
        type: Number,
        default: 0,
      },
      tdStyle: {
        type: String,
        default: '',
      },
    },
    data() {
      return {};
    },
    computed: {
      isActiveItem() {
        return this.getContext.activeItem.id === this.item.id ? true : false;
        //this.designerActiveItem
      },
    },
    methods: {
      rightClick(e, rowIndex, colIndex) {
        this.$emit('rightClick', e, rowIndex, colIndex);
      },
    },
  };
</script>

<style scoped>
  td {
    height: 20px;
    padding: 6px;
    padding-top: 0;
    border: 1px #d2d2d2 solid;
    border: 1px solid #d2d2d2;
    word-break: break-word;
  }

  .cellHide {
    display: none;
  }

  .activeItem {
    border: 2px solid #e6a23c;
  }

  .component-td {
    color: #bbb;
    font-size: 12px;
  }

  .activeItem div span {
    color: #409eff;
  }
</style>
